<template>
  <div class="rights">
    <!-- 1、面包屑导航  -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理 </el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2、卡片 -->
    <el-card>
      <!-- 2-1 搜索框 -->
      <el-row>
        <el-col>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="订单编号">
              <el-input
                v-model="formInline.order_number"
                size="large"
                placeholder="请输入订单编号"
                clearable
                @clear="onSubmit"
              />
            </el-form-item>
            <el-form-item label="开票单位">
              <el-select
                v-model="formInline.order_fapiao_title"
                size="large"
                placeholder="请选择开票单位"
                clearable
                @clear="onSubmit"
                @change="onSubmit"
              >
                <el-option label="公司" value="2" />
                <el-option label="个人" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" size="large"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 2-2、订单列表 -->
      <el-table
        :data="orderList"
        border
        stripe
        fit
        :header-cell-style="header_cell_style"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column
          prop="order_number"
          label="订单编号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="订单单价" align="center">
          <template #default="{ row }">
            {{ "￥" + row.order_price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="是否付款" align="center">
          <template #default="{ row }">
            <el-tag
              :closable="false"
              size="large"
              type="success"
              v-if="row.pay_status === '1'"
              effect="dark"
              >已付款</el-tag
            >
            <el-tag
              :closable="false"
              type="warning"
              v-else
              effect="dark"
              size="large"
              >未付款</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="order_fapiao_title"
          label="开票单位"
          align="center"
        />
        <el-table-column prop="is_send" label="是否发货" align="center" />
        <el-table-column label="创建时间" align="center" show-overflow-tooltip>
          <template v-slot="{ row }">
            {{ $formatTime(row.create_time * 1000) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template #default>
            <el-button
              type="primary"
              :icon="EditPen"
              @click="showUpdateAddresDialog"
              >修改地址</el-button
            >
            <el-button
              type="warning"
              :icon="Search"
              @click="kuaidiVisible = true"
              >查询物流</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 2-3 分页器 -->
      <el-pagination
        :currentPage="formInline.pagenum"
        :page-size="formInline.pagesize"
        :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40, 45, 50]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 3、修改地址对话框  -->
    <el-dialog
      v-model="updateDialogVisible"
      title="修改地址"
      width="50%"
      @close="reset(updateFormRef)"
    >
      <el-form
        ref="updateFormRef"
        :model="updateForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="省市区县">
          <el-cascader
            v-model="updateForm.cities"
            :options="cities"
            :props="props"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="detail">
          <el-input v-model="updateForm.detail" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="submitUpdate(updateFormRef)">修改</el-button>
          <el-button type="primary" @click="updateDialogVisible = false"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 4、查看快递信息 -->
    <el-dialog v-model="kuaidiVisible" title="查看快递信息" width="50%">
      <div class="radio">
        排序：
        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in list"
          :key="index"
          :timestamp="activity.times"
          :color="activity.color"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script setup>
/*---------------------- 引入资源 ---------------------- */
import { ref, onMounted, reactive, getCurrentInstance, computed } from "vue";
import { ArrowRight, EditPen, Search } from "@element-plus/icons-vue";
import request from "@/utils/request";
import { error, success } from "@/utils/message";
import cities from "@/assets/js/citydata";
import activities from "@/assets/js/kuaidi";
/*---------------------- 定义变量 ---------------------- */
let header_cell_style = {
    backgroundColor: "#00A0FF",
    color: "#ffffff",
    textAlign: "center",
  },
  formInline = reactive({
    order_number: "",
    pagenum: 1,
    pagesize: 5,
    order_fapiao_title: "",
  }),
  total = ref(0),
  orderList = ref([]),
  { $formatTime } = getCurrentInstance().appContext.config.globalProperties,
  updateDialogVisible = ref(false),
  updateFormRef = ref(),
  updateForm = reactive({
    cities: [],
    detail: "",
  }),
  props = reactive({
    expandTrigger: "hover",
    value: "text",
    label: "text",
    children: "children",
  }),
  rules = ref({
    detail: [
      { required: true, message: "请输入详细地址", trigger: "blur" },
      { min: 2, max: 150, message: "地址长度 2 到 150字符", trigger: "blur" },
    ],
  }),
  kuaidiVisible = ref(false),
  reverse = ref(true),
  list = computed(() => {
    // 克隆数组
    let arr = JSON.parse(JSON.stringify(activities));
    for (let item of arr) {
      // 字符串日期转换为毫秒数，方便排序
      item.times = new Date(item.times).getTime();
    }
    // 对数组元素排序
    arr.sort((a, b) => {
      return reverse.value ? a.times - b.times : b.times - a.times;
    });
    // 把数字日期转换成字符串日期
    for (let item of arr) {
      item.times = $formatTime(item.times);
    }
    return arr;
  });
/*---------------------- 功能函数 ---------------------- */
// 重置表单
function reset(form) {
  form.resetFields();
}
// 提交修改地址表单
function submitUpdate(form) {
  form.validate((v) => {
    if (!v) {
      return;
    }
    let address = updateForm.cities.join("") + updateForm.detail;
    console.log(address);
    success("修改成功");
    console.log("接口开发中");
    updateDialogVisible.value = false;
    getOrderList();
  });
}
// 点击显示修改地址对话框
function showUpdateAddresDialog() {
  updateDialogVisible.value = true;
}
//请求分页数据
async function getOrderList() {
  let option = {
    url: "orders",
    type: "get",
    data: formInline,
  };
  // 发起请求
  let { data: res } = await request(option);
  // 判断结果
  if (res.meta.status !== 200) {
    return error(res.meta.msg);
  }
  // 解析,保存数据
  orderList.value = res.data.goods;
  total.value = res.data.total;
}
// 点击查询按钮的操作
function onSubmit() {
  formInline.pagenum = 1;
  getOrderList();
}

function handleSizeChange(size) {
  formInline.pagesize = size;
  formInline.pagenum = 1;
  getOrderList();
}
function handleCurrentChange(num) {
  formInline.pagenum = num;
  getOrderList();
}
/*---------------------- 生命周期函数 ---------------------- */
onMounted(() => {
  getOrderList();
});
</script>

<style lang="scss" scoped>
.el-card {
  margin: 10px 0;
}
.el-table {
  margin: 20px 0;
}
.el-pagination {
  float: right;
  margin-bottom: 15px;
}
</style>